<template>
    <VueDraggable v-model="from" :animation="500" target=".sort-target" handle=".icon-drag-dot" :scroll="true" :on-sort="on_sort">
        <TransitionGroup type="transition" tag="ul" name="fade" class="sort-target flex-col gap-10">
            <li v-for="(item, index) in from" :key="index" class="flex-row alingn-c gap-y-16 re">
                <slot :row="item" :index="index" />
                <icon name="drag-dot" size="16" class="cursor-move" />
                <template v-if="isShowCopy">
                    <el-tooltip effect="dark" :show-after="200" :hide-after="200" content="复制" raw-content placement="top">
                        <icon name="copy" size="16" class="drag-icon" color="3" @click="copy(index)"/>
                    </el-tooltip>
                    <el-tooltip effect="dark" :show-after="200" :hide-after="200" :content="item.is_enable == '1' ? '隐藏' : '显示'" raw-content placement="top">
                        <icon :name="item.is_enable == '1' ? 'eye' : 'eye-close'" class="eye-before drag-icon" size="16" color="3" @click="on_show_or_hidden(index)"/>
                    </el-tooltip>
                </template>
                <el-tooltip effect="dark" :show-after="200" :hide-after="200" content="删除" raw-content placement="top">
                    <icon name="delete-o" size="18" color="6" class="drag-icon" @click="remove(index)"/>
                </el-tooltip>
            </li>
        </TransitionGroup>
    </VueDraggable>
</template>

<script setup lang="ts">
import { VueDraggable } from 'vue-draggable-plus';
const emits = defineEmits(['click', 'remove', 'edit', 'onSort', 'replace', 'copy', 'on_show_or_hidden']);

interface Props {
    data: any; // 拖拽列表数据
    modelType?: string;
    modelIndex?: number;
    multipleIcons?: boolean;
    isShowCopy?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
    modelType: 'other',
    modelIndex: 0,
    multipleIcons: false,
    isShowCopy: false,
});
const className = ref('');
watch(
    () => props.data,
    () => {
        from.value = props.data;
    }
);
const from = ref(props.data);

const on_show_or_hidden = (index: number) => {
    emits('on_show_or_hidden', index);
};
const on_click = (item: any, index: number) => {
    emits('click', item, index);
};
const copy = (index: number) => {
    emits('copy', index);
};
// 删除
const remove = (index: number) => {
    emits('remove', index);
};
// 拖拽更新之后用户更新数据
const on_sort = () => {
    emits('onSort', from.value);
};
</script>
<style lang="scss" scoped>
.card-background {
    background: #fff;
    padding-left: 1.6rem;
    padding-right: 2rem;
    border-radius: 4px;
}

.cursor-move {
    color: #838892;
    cursor: move;
}
.remove-icon {
    display: flex;
    background: #fff;
    border-radius: 100%;
    line-height: 1.8rem;
}
.nav-index-select {
    box-shadow: 0rem 0 0rem 0.1rem #409eff;
    /* border: 1px solid #409eff; */
}
.multiple-icon-class {
    padding: 0.5rem 1rem;
    background: #f7f7f7;
    border-bottom-left-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.eye-before.icon-eye-close {
    color: #ff2222;
}
.multiple-icon {
    display: flex;
    border-radius: 100%;
    line-height: 1.8rem;
}
.drag-icon {
    cursor: pointer;
}
</style>
